<template>
	<!-- 外层容器 -->
	<view class="search-container">
		<!-- 输入框容器 -->
		<view class="input-container">
			<uni-icons type="search" size="20" color="#bcc5c0"></uni-icons>
			<input class="ipt_search" :placeholder="placeholderTip" :value="inputVal" @input="onSearchDataChange"
				placeholder-style="color:#bcc5c0" />
		</view>

		<!-- 搜索按钮 -->
		<view class="search-button" @click="search">
			<text>搜索</text>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue'

/**
 * 组件 Props 定义
 */
const props = defineProps({
	// 占位文本
	placeholderTip: {
		type: String,
		default: '搜索点什么...'
	},
	// 输入框内容
	inputVal: {
		type: String,
		default: ''
	}
})

/**
 * 组件事件定义
 * 
 * 使用时可以用 v-model:inputVal 进行双向绑定
 * 或者直接监听 @update:inputVal
 */
const emits = defineEmits(['update:inputVal', 'search'])

/**
 * 输入框内容改变触发
 * e.detail.value 为 input 的最新内容
 */
function onSearchDataChange(e: any) {
	emits('update:inputVal', e.detail.value)
}


/**
 * 搜索按钮点击事件
 */
function search() {
	emits('search')
}
</script>

<style lang="scss" scoped>
/* 外层容器 */
.search-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 8px;
	background-color: rgba(255, 255, 255, 0.9);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	animation: fadeIn 0.3s ease-out;
}

/* 输入框容器 */
.input-container {
	flex: 1;
	display: flex;
	align-items: center;
	padding: 0 15px;
	height: 40px;

	.uni-icons {
		margin-right: 8px;
	}
}

/* 搜索按钮 */
.search-button {
	background: linear-gradient(135deg, #22c4ff, #2196f3);
	height: 40px;
	padding: 0 15px;
	display: flex;
	align-items: center;
	justify-content: center;

	text {
		color: white;
		font-size: 14px;
		font-weight: 500;
	}

	&:active {
		opacity: 0.9;
	}
}

/* 输入框样式 */
.ipt_search {
	flex: 1;
	height: 100%;
	color: #333;
	font-size: 14px;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}
</style>